﻿<div id="chart-demo">
    @(Html.DevExtreme().Chart()
        .ID("line-chart")
        .Palette(VizPalette.Violet)
        .CommonSeriesSettings(s => s
            .ArgumentField("Country")
            .Type(SeriesType.Line)
        )
        .Margin(m => m.Bottom(20))
        .ArgumentAxis(a => a
            .ValueMarginsEnabled(false)
            .DiscreteAxisDivisionMode(DiscreteAxisDivisionMode.CrossLabels)
            .Grid(g => g.Visible(true))
        )
        .Series(s => {
            s.Add().ValueField("Hydro").Name("Hydro-electric");
            s.Add().ValueField("Oil").Name("Oil");
            s.Add().ValueField("Gas").Name("Natural gas");
            s.Add().ValueField("Coal").Name("Coal");
            s.Add().ValueField("Nuclear").Name("Nuclear");
        })
        .Legend(l => l
            .VerticalAlignment(VerticalEdge.Bottom)
            .HorizontalAlignment(HorizontalAlignment.Center)
            .ItemTextPosition(Position.Bottom)
        )
        .Title(t => t
            .Text("Energy Consumption in 2004")
            .Subtitle(s => s.Text("(Millions of Tons, Oil Equivalent)"))
        )
        .Export(e => e.Enabled(true))
        .Tooltip(t => t.Enabled(true))
        .DataSource(new[] {
            new { Country = "USA", Hydro = 59.8, Oil = 937.6, Gas = 582.0, Coal = 564.3, Nuclear = 187.9 },
            new { Country = "China", Hydro = 74.2, Oil = 308.6, Gas = 35.1, Coal = 956.9, Nuclear = 11.3 },
            new { Country = "Russia", Hydro = 40.0, Oil = 128.5, Gas = 361.8, Coal = 105.0, Nuclear = 32.4 },
            new { Country = "Japan", Hydro = 22.6, Oil = 241.5, Gas = 64.9, Coal = 120.8, Nuclear = 64.8 },
            new { Country = "India", Hydro = 19.0, Oil = 119.3, Gas = 28.9, Coal = 204.8, Nuclear = 3.8 },
            new { Country = "Germany", Hydro = 6.1, Oil = 123.6, Gas = 77.3, Coal = 85.7, Nuclear = 37.8 }
        })
    )

    <div class="options">
        <div class="caption">Options</div>
        <div class="option">
            <span>Series Type</span>
            @(Html.DevExtreme().SelectBox()
                .DataSource(new[] {
                    SeriesType.Line,
                    SeriesType.StackedLine,
                    SeriesType.FullStackedLine
                })
                .Value(SeriesType.Line)
                .OnValueChanged(@<text>
                    function (e) {
                        $("#line-chart").dxChart("option", "commonSeriesSettings.type", e.value);
                    }
                </text>)
            )
        </div>
    </div>
</div>
